import React from 'react';
import { Button, message } from 'antd';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import { pinyin } from 'pinyin-pro';
import { request } from 'umi';
import { api } from '@/global';

const randomSalt = (n = 1): number => {
  const max = Math.pow(10, n) - 1;
  const min = Math.pow(10, n - 1);
  return Math.round(Math.random() * (max - min)) + min;
};

export default (props) => {
  return (
    <ModalForm
      title="新建表单"
      trigger={<a style={{ marginLeft: '10px' }}>新建文件筒</a>}
      autoFocusFirstInput
      modalProps={{
        onCancel: () => console.log('run'),
      }}
      onFinish={async (values) => {
        const temp = pinyin(values.bucketName, {
          toneType: 'none',
          type: 'array',
          removeNonZh: true,
        });
        let bucketCode = temp.join('');
        bucketCode += randomSalt(3);

        const r = await request(api.createBucket, {
          method: 'POST',
          data: {
            bucketCode,
            bucketName: values.bucketName,
          },
        });

        if (r.success) {
          message.info('创建成功');
          props?.reloadData();
        }
        return true;
      }}
    >
      <ProFormText
        width="md"
        name="bucketName"
        label="文件筒"
        tooltip="文件筒是不同与文件夹的一种存储级别，文件筒可以理解为电脑中的盘服，如D盘下会有不同的文件夹"
        placeholder="请输入名称"
        rules={[
          {
            required: true,
            message: '请输入文件筒名称',
          },
        ]}
      />
    </ModalForm>
  );
};
